<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";

const myRef = ref(null);
let left = ref("20%");
let value1 = ref("lucy");

const options1 = ref([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);

const focus = () => {
  console.log("focus");
};

const handleChange = (value) => {
  console.log(`selected ${value}`);
};

onMounted(() => {
  var chartDom = myRef.value;
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    // title: {
    //   text: "Rainfall vs Evaporation",
    //   subtext: "Fake Data",
    // },
    tooltip: {
      trigger: "axis",
    },
    // legend: {
    //   data: ["Rainfall", "Evaporation"],
    // },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        // prettier-ignore
        data: ['江山帝景', '壹号城邦', '艺术中心','当代城'],
        position: "bottom",
      },
    ],
    yAxis: [
      {
        type: "value",
        inverse: true,
      },
    ],
    series: [
      {
        name: "CNR",
        type: "bar",
        data: [-32.6, -20.0, -6.4, -25.3],
        // markPoint: {
        //   symbol: "none",
        //   data: [
        //     { type: "max", name: "Max" },
        //     { type: "min", name: "Min" },
        //   ],
        // },
        markLine: {
          silent: true,
          symbol: "triangle",
          symbolSize: "8",
          data: [{ type: "average", name: "噪比" }],
          label: {
            position: "insideMiddleBottom",
          },
          lineStyle: {
            color: "red",
            width: 1,
            type: [5, 20],
          },
        },
      },

      {
        name: "BER",
        type: "bar",
        data: [-48.7, -18.8, -6.0, -18.3],
        // markPoint: {
        //   symbol: "none",
        //   data: [{ name: "Max" }, { name: "Min" }],
        // },
        // markLine: {
        //   data: [{ type: "max", name: "Avg" }],
        // },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<template>
  <div class="chart">
    <div class="header-chart">
      <a-select
        ref="select"
        v-model:value="value1"
        style="
          width: 120px;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 120;
          opacity: 0.2;
        "
        :options="options1"
        @focus="focus"
        @change="handleChange"
      ></a-select>
      <div class="chart-dd" v-for="a in 4">
        <dd class="dd">
          <h5>CRN:17</h5>
          <div class="jdt-conten">
            L
            <div class="jdt">
              <div class="triangle" :style="{ left: left }"></div>
            </div>
            H
          </div>
        </dd>
        <dd class="dd">
          <h5>BER:17</h5>
          <div class="jdt-conten">
            L
            <div class="jdt">
              <div class="triangle" :style="{ left: left }"></div>
            </div>
            H
          </div>
        </dd>
      </div>
    </div>

    <div class="conten-chart" ref="myRef"></div>

    <div class="footer-chart"></div>
  </div>
</template>

<style lang="less" scoped>
.chart {
  .header-chart {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    .ant-select:hover {
      opacity: 1 !important;
    }
    .chart-dd {
      flex: 1;
      width: 24%; // 设为响应式
      @jdheight: 1.5vh;
      padding: 0.5vw;
      dd {
        width: 100%;
        line-height: @jdheight;
        font-size: 12px;
        h5 {
          font-size: 1.2em;
          margin-bottom: 10px;
        }
        .jdt-conten {
          display: flex;

          .jdt {
            flex: 1;
            display: inline-block;
            width: 74%;
            background: #888;
            height: @jdheight;
            position: relative;
            margin: 0 3px;
            .triangle {
              position: absolute;
              width: 0;
              height: 0;
              top: -10px;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 10px solid red;
              &::after {
                content: "";
                width: 1px;
                height: @jdheight;
                position: absolute;
                top: 0;
                left: -0.5px;
                background: red;
                z-index: 100;
              }
            }
          }
        }
      }
    }
  }
  .conten-chart {
    width: 99%;
    height: 30vh;
  }
}
</style>
